<template>
    <div class="search_box displayBox">
        <br>
        <div class="search_content">
            <div class="search_content_left">
                <h2 class="search_header outer_shadows" v-show="router.currentRoute.value.query.kind">
                    搜索"{{router.currentRoute.value.query.kind}}"
                </h2>
                <!--                <HomeExGratia :data-list="exGratiaList"></HomeExGratia> &lt;!&ndash;特惠轮播图&ndash;&gt;-->
                <!--                <br>-->
                <!--更多福利-->
                <!--                <HomeBulletin :bulletinList="bulletinList" :title="'网站公告'"-->
                <!--                              :img="'public/img/home/t01b8d976a9f12bd368.jpg'"></HomeBulletin>-->
                <!--                <br>-->
                <!--                <HomeOpinion></HomeOpinion> &lt;!&ndash;意见收集&ndash;&gt;-->
                <!--                <br>-->
                <!--                <HomeSpecial></HomeSpecial> &lt;!&ndash;专题栏目&ndash;&gt;-->
                <!--                <br>-->
                <ResourceHorizontal :data-list="bulletinList.records"></ResourceHorizontal>
            </div>
            <div class="search_content_right">
                <HomeFeaturedHotspots><h3>精选热点</h3></HomeFeaturedHotspots> <!-- 精选热点列表-->

                <HomeERCode></HomeERCode> <!--微信二维码关注-->
                <br>
                <HomeBulletin :bulletinList="bulletinList.records" :title="'更多福利'"></HomeBulletin> <!--更多福利-->
                <br>
                <HomeContactUs></HomeContactUs> <!--咨询侧边栏-->
            </div>
        </div>


    </div>
</template>
<!--首页-->
<script setup>
import {onMounted, ref} from "vue";
import Carousel from "@/components/publicComponent/Carousel.vue";
import HomeExGratia from "@/components/home/HomeExGratia.vue";
import HomeBulletin from "@/components/home/HomeBulletin.vue";
import HomeOpinion from "@/components/home/HomeOpinion.vue";
import HomeSpecial from "@/components/home/HomeSpecial.vue";
import HomeResource from "@/components/home/HomeResource.vue";
import HomeERCode from "@/components/home/HomeERCode.vue";
import HomeFeaturedHotspots from "@/components/publicComponent/SideInformation.vue";
import HomeContactUs from "@/components/home/HomeContactUs.vue";
import api from "@/request/index.js";
import ResourceHorizontal from "@/components/publicComponent/ResourceHorizontal.vue";
import router from "@/router/index.js";

//特惠列表
const exGratiaList = ref([
    {
        path: "/img/home/ghiukhk.jpg",
        title: "一个父标签中嵌入了两个子标签，当父标签设置display:flex之",
        time: "2022年12月6日",
        visit: 100
    },
    {path: "/img/home/t01b8d976a9f12bd368.jpg", title: "2号", time: "2022年12月6日", visit: 12300},
    {path: "/img/home/t0164da73afa3856.jpg", title: "3号", time: "2022年12月6日", visit: 100},
    {path: "/img/home/ghiukhk.jpg", title: "4号", time: "2022年12月6日", visit: 100},
    {path: "/img/home/t01b8d976a9f12bd368.jpg", title: "5号", time: "2022年12月6日", visit: 20030},
    {path: "/img/home/t0164da73afa3856.jpg", title: "6号", time: "2022年12月6日", visit: 1100},
    {path: "/img/home/ghiukhk.jpg", title: "7号", time: "2022年12月6日", visit: 1020},
    {path: "/img/home/t01b8d976a9f12bd368.jpg", title: "8号", time: "2022年12月6日", visit: 1000},
    {path: "/img/home/t0164da73afa3856.jpg", title: "9号", time: "2022年12月6日", visit: 100},
    {path: "/img/home/ghiukhk.jpg", title: "10号", time: "2022年12月6日", visit: 100},
    {path: "/img/home/t01b8d976a9f12bd368.jpg", title: "11号", time: "2022年12月6日", visit: 120},
    {path: "/img/home/t0164da73afa3856.jpg", title: "12号", time: "2022年12月6日", visit: 600}
])

//公告列表
const bulletinList = ref({
        count: 0,//总行数
        page: 0,//总页数
        records: [{
            id: 0,
            uid: 1003,//文章所属用户id
            content: "文章内容", //文章内容
            title: "文章标题", //文章标题
            support: 12, //点赞数
            visit: 1275, //浏览数
            cover: "/img/home/t01b8d976a9f12bd368.jpg", //封面
            time: new Date,//文章时间
            kind: "软件",//文章类型
        }]
    })

//当前页码，类型，查询条数
const pages = ref({
    size: 10,
    title: router.currentRoute.value.query.kind,//类型,默认软件
    current: 1, //第一页
    page: 0,//总页数
});

//是否开启滚动加载
const scrollLoad = ref(true);

//监听页面的滚动高度,快达到底部时加载文章数据
const throttleHandleScroll = () => {
    //执行的高度,距离底部高度
    const distanceToBottom = document.documentElement.scrollHeight - window.innerHeight - window.scrollY;
    if (distanceToBottom <= 200 && scrollLoad.value && pages.value.page>=pages.value.current) {
        scrollLoad.value = false;
        console.log("滚动加载文章数据~~~~");
        pages.value.current += 1;
        getData();
    } else if (distanceToBottom > 200) {
        scrollLoad.value = true;
    }
};

//获取资源列表
const getData = () => {
    api.essaySearch(pages.value.current, pages.value.size,pages.value.title).then((res) => {
        console.log(router.currentRoute.value.query.kind)
        bulletinList.value.records = bulletinList.value.records.concat(res.data.data.records);
        pages.value.page = res.data.data.page;
        console.log(res.data)
    })

}

//预加载
onMounted(() => {
    bulletinList.value.records = [];
    getData();
    window.addEventListener('scroll', throttleHandleScroll);
})

</script>

<style scoped>

.search_content {
    display: flex;
    justify-content: center;

}

.search_content_left {
    width: 100%;
    max-width: 885px;
    margin-right: 15px;
}

.search_content_right {
    max-width: 300px;
    width: 100%;
}

.search_header {
    padding: 20px;
    color: #6da6e1;
}
</style>